﻿/* -- Copyright © Microsoft Corporation. All rights reserved. */
progress.ring::-ms-fill
{
    animation-name: -ms-ring;
}

progress.withText
{
    color: inherit;                 /* to use the same text color as the page */
    vertical-align: text-bottom;    /* to pull the control down so that the bottom of the control align with the bottom of its label */
}

/* text style when put as the label for progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* text style when put as the label a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* the margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

#imageDownloadSample
{
    margin-top: 50px;
    display: -ms-flexbox;
    -ms-flex-align: center;
}

#imagePlaceholder
{
    width: 80px;
    height: 80px;
    background-color: rgba(204, 204, 204, 0.3);
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
}

#imagePlaceholder.completed
{
    width: 80px;
    height: 80px;
    border: 0px;
    background-image: url("../images/SauceCaramel.png");
    
    animation-name: image-fade-in;
    animation-duration: 0.167s;
    animation-timing-function: linear;
}

@keyframes image-fade-in{
    from 
    {
        opacity: 0.0;
    }
    to 
    {
        opacity: 1.0;
    }
}

progress.differentProgressColor
{
    color: green;
}

progress.gradientProgress
{
    width: 250px;
    height: 16px;
    border-radius: 8px;
    border-width: 0px;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.4);
}

progress.gradientProgress::-ms-fill
{
    border-width: 0px;
    background-size: 250px;     /* without this fixed width the gradient is having an "extending" effect instead of "reveal" effect */
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.4);
    background-image: linear-gradient(90deg, rgb(255, 30, 30), rgb(230, 230, 30) 40%, rgb(30, 255, 30));
}